<template>
  <div>
    <div ref="chart" style="width:50%;height:300px;display: inline-block"></div>
    <div ref="chart1" style="width:50%;height:300px;display: inline-block"></div>
    <div ref="chart2" style="width:100%;height:300px;display: inline-block"></div>
  </div>
</template>

<script>
import request1 from "@/utils/request1";

export default {
  name: "StudentChart",
  data() {
    return {
      maleNum: '',
      femaleNum: '',
      ageData: [],
      departmentData: [],
      studentNumData: []
    }
  },
  created() {
    this.getNumOfMale()
    this.getNumOfFemale()
    this.getNumOfAge()
    this.getAllDepartment()
    this.getNumOfDepartment()
  },
  mounted() {
    setTimeout(() => {
      this.getChartData()
    }, 1000)
    setTimeout(() => {
      this.getChartData1()
    }, 1000)
    setTimeout(() => {
      this.getChartData2()
    }, 1000)
  },
  methods: {
    getNumOfMale() {
      request1.get('/chart/getNumOfMale').then(res => {
        this.maleNum = res.data
      })
    },
    getNumOfFemale() {
      request1.get('/chart/getNumOfFemale').then(res => {
        this.femaleNum = res.data
      })
    },
    getNumOfAge() {
      request1.get('/chart/getNumOfAge').then(res => {
        this.ageData = res.data
      })
    },
    getAllDepartment() {
      request1.get('/chart/getAllDepartment').then(res => {
        this.departmentData = res.data
      })
    },
    getNumOfDepartment() {
      request1.post('/chart/getNumOfDepartment').then(res => {
        console.log(res.data)
        this.studentNumData = res.data
      })
    },

    getChartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: '男女生人数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                {value: this.maleNum, name: '男生'},
                {value: this.femaleNum, name: '女生'},
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        option && myChart.setOption(option);
      }
    },

    getChartData1() {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        const option = {
          title: {
            text: '各年龄人数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: ['21岁', '22岁', '23岁', '24岁']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.ageData,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        option && myChart.setOption(option);
      }
    },

    getChartData2() {
      const chart2 = this.$refs.chart2
      if (chart2) {
        const myChart = this.$echarts.init(chart2)
        const option = {
          title: {
            text: '各院系人数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: this.departmentData,
            "axisLabel":{
              interval: 0,
              rotate: 30,
            },
            triggerEvent: true,
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
          },
          series: [
            {
              data: this.studentNumData,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        option && myChart.setOption(option);
      }
    },

  }
}
</script>
